<template>
	<view v-if="hasLogin">	
		<!-- 刷新页面后的顶部提示框 -->
		<view class="tips" :class="{ 'tips-ani': tipShow }">已经是最新的作业了</view>
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collectionList"
		 @load="load">
		<view v-if="error">{{error.message}}</view>
		<view v-else-if="loading">正在加载...</view>
		<!-- 最新作业文字展示 标题 -->
		<view class="uni-title" >
			<view class="title-left">
				<!-- <textarea name="" id="" cols="10" rows="10">最新作业</textarea> -->
				<uni-NavBar title="作业列表" :fixed="true" :show-back-btn="false">
						<text  class="nav-bar-text1">{{ homework }}</text>
						<text slot="right" class="nav-bar-text2">{{ date }}</text>
					
				</uni-NavBar>
			</view>
			<view class="title-right">
				<!-- 日历图标 -->
				<!-- <uni-icons value="calendar" size="20"></uni-icons> -->
				<!-- 日期选择器,默认显示当前日期 -->
				<view class="example-body">
					<uni-icons  class="nav-bar-icon1"  type="back" size="20" @click="Cicon1"></uni-icons>
					<uni-icons  class="nav-bar-icon2"  type="forward" size="20" @click="Cicon2"></uni-icons>
					<uni-datetime-picker type="date" :border="false" :clear-icon="false" v-model="single" @change="selectDate"/>
				</view>
			</view>
		</view>
			
		<!-- 基于 uni-card 的页面布局 引入子组件 -->
		<homeworkCard :data= "data" :single = "single" :userInfo="userInfo"></homeworkCard>
		

		<!-- 交作业按钮 -->
		<view class="homework-button">
			<button class="mini-btn" type="primary" size="mini" @click="submitButton">点击提交</button>
		</view>

		<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
		<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
		</unicloud-db>
	</view>
	<!-- 请输入邀请码 -->
	<view class="" v-else>
		<p>没有登录</p>
	</view>
</template>

<script>
// 导入子组件homework-card
import homeworkCard from '@/components/homework-card/homework-card.vue'
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database()
	export default {
		components: {
			homeworkCard
		},

		data() {
			return {
				// 作业按钮的值
				button_value: '',
				user_id:"",
				// 数据表名
				// collection: 'opendb-news-articles',
				// collection: 'class-list,assig-homework',
				collectionList: [db.collection('assig-homework').field(
						'class_id,homework_title,homework_detail,homework_image,homework_video,create_homework_time,is_show').getTemp(), db
					.collection('class-list').field('_id,class_name as text,invitation_code,user_id').getTemp()
				],
				formData: {
					status: 'loading' // 加载状态
				},
				tipShow: false, // 是否显示顶部提示框
				// 作业标题
				homework: '最新作业',
				// 当前日期
				single: '',
			};
		},
		
		onLoad() {		
			// 调用是否登录函数
			this.isLogin()
			// 调用是否有班级函数
			this.isClass()
			// 获取时间戳
			const now = Date.now();
			// 本地时间戳只取年月日
			const date = new Date(now).toLocaleDateString();
			// console.log("当前日期:",date);
			// 日历当前日期
			this.single = date
			
		},
		onShow(){
			//获取作业按钮是否显示
			this.getButtonValue()
		},
		methods: {
			// 获取作业按钮是否显示
			getButtonValue(){
				// 查询submit-homework数据库里面的is_finish字段是true还是false
				db.collection('submit-homework').where({
					user_id:this.userInfo._id,
					
				}).get().then(res=>{
					console.log("作业数据库res:",res);
					// 如果数据库里面没有数据
					if(res.result.data.length==0){
						this.button_value = '未完成'
					}else{
						// 如果数据库里面有数据
						// 获取数据库里面的is_finish字段
						let is_finish = res.result.data[0].is_finish
						
						// 获取当前展示的homework_id


						// 如果is_finish字段是true
						if(is_finish){
							this.button_value = '已完成'
						}else{
							this.button_value = '未完成'
						}
						
						
					}
				})
			},
			// 点击交作业按钮跳转到交作业详细页面
			submitButton(){
				// 通过当前用户id获取当前班级id
				db.collection('class-list').where({
					user_id:this.userInfo._id
				}).get().then(res=>{
					// console.log("班级列表res:",res);
					// 获取班级id
					let class_id = res.result.data[0]._id
					// 打印班级id
					// console.log("班级id:",class_id);
					// 通过班级id获取作业列表
					db.collection('assig-homework').where({
						class_id:class_id
					}).get().then(res=>{
						// console.log("作业列表res:",res);
						// 获取作业列表
						let homework_list = res.result.data
						// 打印作业列表
						// console.log("作业列表:",homework_list);
						// 通过当前日期获取作业列表里面的作业
						homework_list.forEach(item=>{
							// 获取作业列表里面的作业时间
							let create_homework_time = item.create_homework_time
							// 打印作业时间
							// console.log("作业时间:",create_homework_time);
							// 切割作业时间前十位
							let create_homework_time1 = create_homework_time.slice(0,10)
							// 打印切割后的作业时间
							// console.log("切割后的作业时间:",create_homework_time1);
							// 打印single
							console.log("single:",this.single);
							// 判断两个字符是否相等
							// console.log("判断两个字符是否相等:","2023/2/22"=="2023/2/22");
							// 判断当前日期是否等于作业时间
							if(create_homework_time1.includes(this.single)){
								// 打印data
								// console.log("data1:",item);
								// 获取_id
								let _id = item._id
								// 打印_id
								// console.log("_id:",_id);
								uni.setStorageSync('data',{data:this.$data,single:this.single,userInfo:this.userInfo,_id:_id})
								// 获取缓存里的_id
								let _id1 = uni.getStorageSync('data')._id
								// 打印缓存里的_id
								// console.log("_id1:",_id1);
								uni.navigateTo({
									url: '/pages/submit-homework/submit-homework',
								});
							}
						})

					})
				})
				

				

				
			},
			// 点击前进图标
			Cicon2(){
				// 获取当前日期
				let date = this.single
				// 将当前日期转换为时间戳
				const date1 = new Date(date).getTime();
				// 将时间戳加一天
				const date2 = date1 + 24*60*60*1000
				// 将时间戳转换为时间
				const date3 = new Date(date2).toLocaleDateString();
				console.log("前进一天:",date3);
				// 将时间赋值给日历
				this.single = date3
			},
			// 点击后退图标
			Cicon1(){
				// 获取当前日期
				let date = this.single
				// 将当前日期转换为时间戳
				const date1 = new Date(date).getTime();
				// 将时间戳减一天
				const date2 = date1 - 24*60*60*1000
				// 将时间戳转换为时间
				const date3 = new Date(date2).toLocaleDateString();
				console.log("后退一天:",date3);
				// 将时间赋值给日历
				this.single = date3
			},
			// 日期点击事件
			selectDate(e){
				// 将e的字符串日期抓换为时间戳
				const date = new Date(e).getTime();
				// 将时间戳转换为时间
				const date1 = new Date(date).toLocaleDateString();
				console.log('selectDate点击事件:', typeof date1);
				this.single = date1

			},
			// 判断用户是否登录,如果没有登录就提示用户登录
			isLogin(){
				// 获取用户是否登录,并赋值给变量
				let hasLogin2 = store.hasLogin
				// 看是否登录,如果没有登录提示用户跳转到登录页面
				if(hasLogin2){
					console.log("已经登录了");
					return hasLogin2
				}else{
					console.log("还没登录");
					// 调用uni.showModal弹出登录提示框，引导用户点击登录按钮
					uni.showModal({
						title: '提示',
						content: '您还没有登录，是否前往登录？',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								// 跳转到登录页面
								uni.navigateTo({
									url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd',
								})

							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return hasLogin2
				}
			},
			// 如果用户登录,查看用户是否有班级,如果没有提示用户输入邀请码
			isClass(){
				// 调用用户是否登录函数,查看返回的是否登录
				let hasLogin2 = this.isLogin()
				console.log("hasLogin2",hasLogin2);
				// 查看是否有班级
				if(hasLogin2){
					// 获取用户信息
					let userInfo = store.userInfo
					console.log("userInfo",userInfo);
					// 获取用户id
					let user_id = userInfo._id
					console.log("user_id",user_id);
					// 在班级数据库里查看是否有用户id
					db.collection('class-list').where({
						user_id: user_id
					}).get().then(res => {
						// console.log("res",res.data.length);
						let classList = res.result.data
						// console.log("classList",classList);
						// 查看classList 如果有数据查看长度
						if(classList.length > 0){
							console.log("有班级");
							return
						}else{
							let that = this
							console.log("没有班级");
							// 如果没有班级就弹出有editable输入邀请码的提示框
							uni.showModal({
								title: '提示',
								// content: '您还没有班级，是否前往输入邀请码？',
								editable: true,
								placeholderText: '请输入邀请码',
								success: function(res) {
									if (res.confirm) {
										// console.log('用户点击确定',that);
										// 调用验证码是否正确 this指向问题
										that.isInvitationCode(res.content)	
																		
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							
						}
					})
					
					
				}
			},
			// 邀请码是否正确
			isInvitationCode(res){
				console.log("isInvitationCoderes",res);
				// 获取用户输入的邀请码
				let invitation_code = res
				// 将invitation_code转换成整数
				invitation_code = parseInt(invitation_code)
				// 在班级数据库里查看是否有用户id
				db.collection('class-list').where({
					invitation_code: invitation_code
				}).get().then(res => {
					//获取用户id
					let userInfo = store.userInfo
					let user_id = userInfo._id
					// 获取班级列表数据
					let classList = res.result.data
					console.log("classList",classList);
					
					// 查看classList 如果有数据查看长度
					if(classList.length > 0){
						console.log("邀请码正确");
						// 获取班级数据库里的user_id
						let user_id2 = classList[0].user_id
						// 将user_id添加到user_id2里
						user_id2.push(user_id)
						// 将user_id添加push到班级数据库里
						db.collection('class-list').where({
							invitation_code: invitation_code
						}).update({
							user_id: user_id2
						}).then(res => {
							console.log("添加成功",res);
							// 刷新当前页面
							uni.reLaunch({
								url: '/pages/list/homework/homework'
							})
						}).catch(err => {
							console.log("添加失败",err);
						})	
						
						
					}else{
						console.log("邀请码错误");
						let that = this
					// 	如果没有班级就弹出有editable输入邀请码的提示框
						uni.showModal({
							title: '提示',
							// content: '邀请码错误，请重新输入',
							editable: true,
							placeholderText: '邀请码错误，请重新输入',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									// 获取用户输入的邀请码
									let invitation_code = res.content
									console.log("invitation_code",invitation_code);
									// 递归调用
									that.isInvitationCode(invitation_code)
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
					}
				})
			},
			
			// 预览图片
			previewImage(url) {
				//字符转化成数组 split直接转化成一个元素,不会将字符串字符分开
				let array_url = url.split()
				//uniapp预览轮播图
				uni.previewImage({
					// current: index, //预览图片的下标
					urls: array_url //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			}
		},
		computed:{
			// 是否登录
			hasLogin(){
				// console.log("hasLogin");
				// 返回store.hasLogin
				return store.hasLogin
			},
			userInfo(){
				return store.userInfo
			},
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.formData.status = 'more'
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				this.tipShow = true
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.tipShow  = false
				},1000)
				uni.stopPullDownRefresh()
			})
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.$refs.udb.loadMore()
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.nav-bar-text1 {
		color: black;
		font-size: 16px;
		margin: 0 10px;
	}
	.nav-bar-text2 {
		color: rgb(117, 111, 111);
		font-size: 10px;
		margin: 0 10px;
	}
	.uni-title{
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// 将.nav-bar-icon1 靠右
	}
	.example-body {
		background-color: transparent;
		padding: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		
	}	

	// 交作业按钮在右边
	.homework-button{
		float: right;
		margin-right: 30rpx;
	}
</style>
